<template>
    <div class="main">
        <el-row class="ga-select">
            <el-col :span="3" class="col-1">
                <el-form label-width="120">
                    <el-form-item label="录取名次：">
                        <el-input v-model="admissionCount"></el-input>
                    </el-form-item>
                </el-form>
            </el-col>
            <el-col class="col-2" :span="5">
                <a href="#" @click="handleAdmission">
                    <img type="image" src="/uploads/luqu.gif" />
                </a>
            </el-col>
            <el-col class="col-3" :span="14">
                <el-button type="primary">编排</el-button>
            </el-col>
        </el-row>
        <!-- border -->
        <div class="main-table">
            <el-table :data="pmatchData" stripe :header-cell-style="headClass">
                <el-table-column prop="group" label="组">
                </el-table-column>
                <el-table-column prop="sort" label="排序">
                </el-table-column>
                <el-table-column prop="name" label="姓名">
                </el-table-column>
                <el-table-column prop="unit" label="单位">
                </el-table-column>
                <el-table-column prop="grade" label="成绩">
                </el-table-column>
                <el-table-column prop="rank" label="名次">
                </el-table-column>
                <el-table-column prop="drawlots" label="抽签">
                </el-table-column>
                <el-table-column prop="enroll" label="录取">
                </el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template #default="scope">
                        <el-button type="primary" @click="showeditdialog(scope.row)">修改</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <el-dialog title="编辑顺序" v-model="editdialogVisible" draggable width="25%">
            <el-form :model="editfrom" label-width="90">
                <el-form-item label="组：">
                    <el-input v-model="editfrom.group"></el-input>
                </el-form-item>
                <el-form-item label="排序：">
                    <el-input v-model="editfrom.sort"></el-input>
                </el-form-item>
                <el-form-item label="姓名：">
                    <el-input v-model="editfrom.name"></el-input>
                </el-form-item>
                <el-form-item label="单位：">
                    <el-input v-model="editfrom.unit"></el-input>
                </el-form-item>
                <el-form-item label="成绩：">
                    <el-input v-model="editfrom.grade"></el-input>
                </el-form-item>
                <el-form-item label="名次：">
                    <el-input v-model="editfrom.rank"></el-input>
                </el-form-item>
                <el-form-item label="抽签：">
                    <el-input v-model="editfrom.drawlots"></el-input>
                </el-form-item>
                <el-form-item label="录取：">
                    <el-input v-model="editfrom.enroll"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editdialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="editdialogVisible = false">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            pmatchData: [{
                group: 1,
                sort: 0,
                name: '唐诗',
                unit: '孝感',
                grade: 30,
                rank: null,
                drawlots: 0,
                enroll: 0,
            }, {
                group: 1,
                sort: 0,
                name: '罗娜',
                unit: '江城',
                grade: 50,
                rank: null,
                drawlots: 0,
                enroll: 0,
            }, {
                group: 1,
                sort: 0,
                name: '葛玲',
                unit: '江城',
                grade: 40,
                rank: null,
                drawlots: 0,
                enroll: 0,
            }, {
                group: 1,
                sort: 0,
                name: '葛玲',
                unit: '江城',
                grade: 240,
                rank: null,
                drawlots: 0,
                enroll: 0,
            }, {
                group: 1,
                sort: 0,
                name: '葛玲',
                unit: '江城',
                grade: null,
                rank: null,
                drawlots: 0,
                enroll: 0,
            }, {
                group: 1,
                sort: 0,
                name: '葛玲',
                unit: '江城',
                grade: 80,
                rank: null,
                drawlots: 0,
                enroll: 0,
            }, {
                group: 1,
                sort: 0,
                name: '葛玲',
                unit: '江城',
                grade: 70,
                rank: null,
                drawlots: 0,
                enroll: 0,
            }, {
                group: 1,
                sort: 0,
                name: '葛玲',
                unit: '江城',
                grade: 100,
                rank: null,
                drawlots: 0,
                enroll: 0,
            }],
            admissionCount: 0,
            editdialogVisible: false,
            editfrom: {
                group: null,
                sort: null,
                name: '',
                unit: '',
                grade: null,
                rank: null,
                drawlots: null,
                enroll: null,
            }
        }
    },
    created() {
        // 获取传过来的id
        const urlParams = new URLSearchParams(window.location.search);
        const id = urlParams.get('id');
        console.log(id)
    },
    methods: {
        headClass() {
            return { 'background': '#27ae60', 'color': '#FFFFFF' }
        },
        async showeditdialog(info) {
            // console.log(info);
            this.editdialogVisible = true
            this.editfrom = info
        },
        handleAdmission() {
            const count = this.admissionCount; //获取录取人数
            // 拿到表格按照成绩从小到大进行排序之后的数据
            const sortedData = this.pmatchData.slice().sort((a, b) => { // sort比较函数，a是后一个元素，b是前一个元素
                if (a.grade === null || a.grade === undefined) {
                    return 1; // 将enroll为空的数据排在最后
                }
                if (b.grade === null || b.grade === undefined) {
                    return -1; // 将enroll为空的数据排在最后
                }
                return a.grade - b.grade;
            });
            // 根据录取人数，进行录取
            for (let i = 0; i < count && i < sortedData.length; i++) {
                if (sortedData[i].grade !== null && sortedData[i].grade !== undefined) {
                    sortedData[i].enroll = i + 1;
                }
            }
        },
    }
}
</script>

<style lang="less" scoped>
.main {
    display: block;
    flex: 1;
    flex-basis: auto;
    overflow: auto;
    box-sizing: border-box;
    padding: 20px;

    .main-table {
        padding: 0 20px;
    }
}

.col-2 {
    margin: 5px 0 0 15px;
    text-align: left;
}

.col-3 {
    text-align: right;
}
</style>